<template>
  <div>
    <div id="centreLeft1Chart" ></div>
  </div>
</template>

<script>


export default {
  data() {
    return {
      chart: null,
      xitem1: ["智能垃圾接收柜",
        "智能垃污水收柜"],     //这里是x轴现实的数据
      yval1:[33,98],
      yval2:[923.58,723],
      company_id:''
    };
  },

  mounted() {
    this.getData();
  },
  props: {
    selectProp: {
      type: String,
      required: true
    }
  },
  watch:{
    selectProp:{
      handler(n){
        console.log('centreLeft1Chart获取父组件的参数： ' + n)
        this.company_id = n
      },
      deep:true// 深度监听父组件传过来对象变化
    }
  },
  updated() {

  },
  methods: {
    //智能设备储量数据
    getData(){
      this.axios.get('http://36.156.158.102:8085/cqdata/cqdata/queryEquipData?companyId='+ this.company_id).then((response)=>{
        this.yval1 = response.data.data.data1
        this.yval2 = response.data.data.data2
        this.draw()
      })
    },
    draw() {
      const xval = this.xitem1
      const yval1 = this.yval1
      const yval2 = this.yval2
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.$echarts.init(document.getElementById("centreLeft1Chart"));
      //  ----------------------------------------------------------------

      this.chart.setOption({
          color: ["#2f89cf"],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          //网格容器,可以控制图表大小
          grid: {
            left: '4%',
            right: '2%',
            bottom: '14%',
            top: '4%',
            containLabel: true
          },
          xAxis: [
            {
              type: "category",
              data: xval,
              axisTick: {
                alignWithLabel: true
              },
              axisLabel: {
                textStyle: {
                  color: "rgba(255,255,255,.9)",
                  fontSize: "12"
                }
              },
              axisLine: {
                show: false
              }
            }
          ],
          yAxis: [
            {
              type: "value",
              axisLabel: {
                textStyle: {
                  color: "rgba(255,255,255,.9)",
                  fontSize: "12"
                }
              },
              axisLine: {
                lineStyle: {
                  color: "rgba(255,255,255,.1)"
                  // width: 1,
                  // type: "solid"
                }
              },
              splitLine: {
                lineStyle: {
                  color: "rgba(255,255,255,.1)"
                }
              }
            }
          ],
          // 图例组件
          legend: {
            orient: 'horizontal',      // 布局方式，默认为水平布局，可选为：
                                       // 'horizontal' ¦ 'vertical'
            x: 'center',               // 水平安放位置，默认为全图居中，可选为：
                                       // 'center' ¦ 'left' ¦ 'right'
                                       // ¦ {number}（x坐标，单位px）
            backgroundColor: 'rgba(0,0,0,0)',
            borderColor: '#ccc',       // 图例边框颜色
            borderWidth: 0,            // 图例边框线宽，单位px，默认为0（无边框）
            padding: 5,                // 图例内边距，单位px，默认各方向内边距为5，
                                       // 接受数组分别设定上右下左边距，同css
            itemGap: 10,               // 各个item之间的间隔，单位px，默认为10，
                                       // 横向布局时为水平间隔，纵向布局时为纵向间隔
            itemWidth: 10,             // 图例图形宽度
            itemHeight: 10,            // 图例图形高度
            bottom: '0%',               //下面距离
            textStyle: {
              color: 'white'          // 图例文字颜色
            }
          },
          series: [
            {
              name: "当前储量",
              type: 'bar',
              stack: '1',
              data: yval1,
              barWidth: '35%',//柱子的宽度
              color: 'rgb(85,206,160)',//柱子的颜色
            },
            {
              name: '剩余空间',
              type: 'bar',
              stack: '1',
              data: yval2,
              barWidth: '35%',//柱子的宽度
              color: 'rgb(86, 137, 239)',//柱子的颜色
            },

          ]
      });
    }
  },


  destroyed() {
    window.onresize = null;
  }
};
</script>

<style lang="scss" scoped>
  #centreLeft1Chart{
      width: 100%;
    height: 168px;
      margin: 0 auto;

  }
</style>
